<template>
	<div class="container">
		<div class="card-box">
			<el-card class="box-card">
				<div>
					<span>账户余额：¥</span>
					<span style="padding-left:2px;font-size: 30px;color: #E6A23C;">{{cashBalance}}</span>
					<span
						:style="{paddingLeft:'15px',fontSize: '14px',color: status==0?'seagreen':'red'}">{{STATUS[status]}}</span>
				</div>
			</el-card>
		</div>

		<el-form :inline="true" :model="form">
			<el-form-item label="交易类型">
				<el-select v-model="form.dataType" placeholder="请选择交易类型">
					<el-option label="全部" :value="-1"></el-option>
					<el-option label="平台代充" :value="1"></el-option>
					<el-option label="拼团红包奖励代扣" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="日期">
				<el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" clearable>
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSeach" icon="el-icon-search">搜索</el-button>
			</el-form-item>
		</el-form>
		<div class="total">
			<ul>
				<li>
					<span >{{DATATYPE[totalDataType]}}总金额</span>
					<span class="nums">{{totalChangePrice}}</span>
				</li>
			</ul>
		</div>
		<el-table border :data="accountData">
			<el-table-column prop="newMoney" label="账户余额" align="center" width="120"></el-table-column>
			<el-table-column prop="changeMoney" label="交易金额" align="center" width="100">
				<template slot-scope="scope">
					<span :class="CLASS[scope.row.dataType]">{{scope.row.changeMoney}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="交易方向" align="center" width="100">
				<template slot-scope="scope">
					<span>{{TYPE[scope.row.type]}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="dataType" label="交易类型" align="center" width="150">
				<template slot-scope="scope">
					<span>{{DATATYPE[scope.row.dataType]}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createDate" label="交易时间" align="center" width="170"></el-table-column>
			<el-table-column prop="dataRemarks" label="备注" align="center"></el-table-column>
		</el-table>

		<div class="page">
			<el-pagination :page-size="form.size" :current-page="form.page" layout="prev, pager, next,total,jumper"
				:total="total" background @current-change="currentChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				totalDataType: -1,
				date: [],
				form: {
					dataType: -1, //交易类型 -1 全部 1平台代充 2平台代扣
					startDate: '', //交易开始时间
					endDate: '', //交易结束时间
					merchantId: localStorage.getItem('merchantId'), //商家ID
					page: 1,
					size: 10
				},
				total: 0,
				accountData: [],
				totalChangePrice: 0,
				TYPE: {
					1: "收入",
					2: "支出"
				},
				DATATYPE: {
					1: '平台代充',
					2: '拼团红包奖励代扣'
				},
				cashBalance: 0,
				status: 0,
				STATUS: {
					0: '正常',
					1: '冻结'
				},
				CLASS: {
					1: 'income',
					2: 'pay'
				}
			}
		},
		mounted() {
			this.getData();
			this.getBanlance();
			this.getAccountStatistics()
		},
		methods: {
			getAccountStatistics() {
				this.$http.get(this.$api.accountStatistics, this.form).then(res => {
					if (res.code == 0) {
						this.totalDataType = this.form.dataType;
						this.totalChangePrice = res.data.totalChangePrice;
					}
				})
			},
			getData() {
				this.form.startDate = this.date != null ? this.date[0] : '';
				this.form.endDate = this.date != null ? this.date[1] : '';
				this.$http.get(this.$api.adminAccount, this.form).then(res => {
					if (res.code == 0) {
						this.accountData = res.data;
						this.total = res.extraInfo
					}
				})
			},
			getBanlance() {
				this.$http.get(this.$api.accountBanlace + '/' + this.form.merchantId).then(res => {
					if (res.code == 0) {
						this.cashBalance = res.data.cashBalance;
						this.status = res.data.status;
					}
				})
			},
			onSeach() {
				this.form.page = 1;
				this.getData();
				this.getBanlance();
				this.getAccountStatistics()
			},
			currentChange(val) {
				this.form.page = val;
				this.getData();
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 15px;
	}

	.page {
		margin-top: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-box {
		margin-bottom: 15px;
	}
	.total ul {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 50px;
		color: #555;
	}

	.total ul li {
		margin: 0 15px;
	}

	.total ul li .nums {
		font-size: 24px;
		font-weight: bold;
		color: red;
		padding-left: 8px;
	}
	.income {
		color: #F56C6C;
	}
	.pay {
		color: #67C23A;
	}
</style>
